<template>
  <div class="aiRowTwoL">
    <div class="positionContainer">
      <div class="positionContainerOne">
        <p>营销目标分解</p>
        <ul>
          <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
            <span>品牌传播</span>
          </li>
          <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
            <span>产品促销</span>
          </li>
          <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
            <span>下载APP</span>
          </li>
          <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
            <span>大号增粉</span>
          </li>
          <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
            <span>获取表单</span>
          </li>
        </ul>
      </div>
      <div class="positionContainerTwo">
        <p>锁定目标人群</p>
        <div>
          <ul>
            <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
              <span>年龄</span>
            </li>
            <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
              <span>性别</span>
            </li>
            <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
              <span>地域</span>
            </li>
            <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
              <span>职业</span>
            </li>
          </ul>
          <ul>
            <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
              <span>兴趣爱好</span>
            </li>
            <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
              <span>家庭结构</span>
            </li>
            <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
              <span>收入水平</span>
            </li>
            <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
              <span>触网行为</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="positionContainerThree">
        <p>媒体策略组合</p>
        <ul>
          <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
            <span>媒体组合</span>
          </li>
          <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
            <span>预算支配</span>
          </li>
          <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
            <span>计费模式</span>
          </li>
        </ul>
      </div>
      <div class="positionContainerFour">
        <p>自主广告投放</p>
        <ul>
          <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
            <span>广告位</span>
          </li>
          <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
            <span>创新</span>
          </li>
          <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
            <span>频道</span>
          </li>
          <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
            <span>出价</span>
          </li>
          <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
            <span>时段</span>
          </li>
        </ul>
      </div>
      <div class="positionContainerFive">
        <p>广告效果检测及优化</p>
        <ul>
          <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
            <span>KPI</span>
          </li>
          <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
            <span>实时数据</span>
          </li>
          <li><img src="../../../assets/img/3-一站式AI/0.png" alt="">
            <span>自动优化</span>
          </li>
        </ul>
      </div>
      <img src="../../../assets/img/3-一站式AI/1.png" alt="" class="numOne">
      <img src="../../../assets/img/3-一站式AI/2.png" alt="" class="numTwo">
      <img src="../../../assets/img/3-一站式AI/3.png" alt="" class="numThree">
      <img src="../../../assets/img/3-一站式AI/4.png" alt="" class="numFour">
      <img src="../../../assets/img/3-一站式AI/5.png" alt="" class="numFive">
    </div>
    <div class="aniCircle aniCircles" ref="circles" style="300px">
      <div class="aniCircleThree">
      </div>
      <div class="aniCircleTwo">
      </div>
      <div class="aniCircleOne"></div>
      <!-- <div class="home">
    <div class="circle yuan" ref="circle"></div>
  </div> -->
    </div>
  </div>
</template>
<script>
import moduleName from '../../../assets/css/animate.css'
export default {
  data() {
    return {
      circle1: '',
      circle2: '',
      circle3: '',
      width: null
    }
  },
  created() {},

  methods: {
    time() {
      this.scrollRoute =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      if (this.scrollRoute >= 2012) {
      }
    }
  }
}
</script>
<style scoped>
@keyframes circleOne {
  0% {
    opacity: 0.35;
    transform: scale(0.5);
    box-shadow: 0px 0px 15px#f15153 inset;
    border: 1px solid #f15153;
    border-radius: 50%;
  }
  100% {
    opacity: 0.1;
    transform: scale(4);
    box-shadow: 0px 0px 15px#f7cdce inset;
    border: 1px solid #f7cdce;
    border-radius: 50%;
  }
}

.aiRowTwoL {
  width: 970px;
  float: left;
  height: 640px;
  background-image: url('../../../assets/img/3-一站式AI/6.png');
  position: relative;
  background-repeat: no-repeat;
  background-position: 46% 50%;
  overflow: hidden;
}
.positionContainer {
  position: relative;
  z-index: 5;
}
.positionContainer p {
  font-size: 18px;
  color: rgb(34, 34, 34);
}
.positionContainer li span {
  font-size: 16px;
  color: rgb(34, 34, 34);
}
.positionContainerOne {
  width: 360px;
  height: 130px;
  /* border: 1px solid gray; */
  /* border-radius: 1px 1px 1px gray; */
  -moz-box-shadow: 0px 0px 16px #d4d4d4;
  -webkit-box-shadow: 0px 0px 16px #d4d4d4;
  box-shadow: 0px 0px 16px #d4d4d4;
  position: absolute;
  top: 93px;
  left: 45px;
  overflow: hidden;
  background: #fff;
}
.positionContainerOne > p {
  width: 30%;
  line-height: 130px;
  float: left;
  padding-left: 20px;
  box-sizing: border-box;
}
.positionContainerOne > ul {
  width: 70%;
  float: left;
}
.positionContainerOne > ul > li {
  width: 50%;
  height: 40px;
  float: left;
  line-height: 40px;
  text-align: center;
}
.positionContainerTwo {
  width: 430px;
  height: 130px;
  position: absolute;
  -moz-box-shadow: 0px 0px 16px #d4d4d4;
  -webkit-box-shadow: 0px 0px 16px #d4d4d4;
  box-shadow: 0px 0px 16px #d4d4d4;
  top: 130px;
  left: 490px;
  background: #fff;
}
.positionContainerTwo > p {
  width: 40%;
  line-height: 130px;
  float: left;
  padding-left: 20px;
  box-sizing: border-box;
}
.positionContainerTwo > div {
  width: 60%;
  float: left;
  overflow: hidden;
}
.positionContainerTwo > div > ul:nth-child(1) > li {
  width: 60px;
  height: 40px;
  float: left;
  line-height: 40px;
  text-align: center;
}
.positionContainerTwo > div > ul:nth-child(1) {
  margin-left: 8px;
}
.positionContainerTwo > div > ul:nth-child(2) > li {
  width: 100px;
  height: 40px;
  float: left;
  line-height: 40px;
  text-align: center;
}
.positionContainerThree {
  width: 265px;
  height: 130px;
  box-shadow: 0px 1px 6px #aaa;
  position: absolute;
  top: 250px;
  left: 100px;
  background: #fff;
}
.positionContainerThree > p {
  width: 60%;
  line-height: 130px;
  float: left;
  padding-left: 20px;
  box-sizing: border-box;
}
.positionContainerThree > ul {
  width: 40%;
  float: left;
}
.positionContainerThree > ul > li {
  float: left;
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.positionContainerFour {
  width: 380px;
  height: 100px;
  -moz-box-shadow: 0px 0px 16px #d4d4d4;
  -webkit-box-shadow: 0px 0px 16px #d4d4d4;
  box-shadow: 0px 0px 16px #d4d4d4;
  position: absolute;
  padding-left: 13px;
  top: 307px;
  right: 40px;
  background: #fff;
  border: 1px solid #fff;
}
.positionContainerFour > p {
  width: 40%;
  line-height: 100px;
  float: left;
  padding-left: 20px;
  box-sizing: border-box;
}
.positionContainerFour > ul {
  width: 60%;
  float: left;
}
.positionContainerFour > ul > li {
  width: 70px;
  height: 40px;
  float: left;
  line-height: 40px;
}
.positionContainerFive {
  width: 308px;
  height: 128px;
  -moz-box-shadow: 0px 0px 16px #d4d4d4;
  -webkit-box-shadow: 0px 0px 16px #d4d4d4;
  box-shadow: 0px 0px 16px #d4d4d4;
  position: absolute;
  top: 430px;
  left: 285px;
  background: #fff;
}
.positionContainerFive > p {
  width: 70%;
  line-height: 128px;
  float: left;
  padding-left: 20px;
  box-sizing: border-box;
}
.positionContainerFive > ul {
  width: 30%;
  float: left;
}
.positionContainerFive > ul > li {
  width: 100%;
  height: 40px;
  float: left;
  line-height: 40px;
}
.numOne {
  position: absolute;
  top: 144px;
  left: 25px;
}
.numTwo {
  position: absolute;
  top: 180px;
  left: 470px;
}
.numThree {
  position: absolute;
  top: 300px;
  left: 83px;
}
.numFour {
  position: absolute;
  top: 340px;
  left: 533px;
}
.numFive {
  position: absolute;
  top: 481px;
  left: 266px;
}
.aniCircles {
  width: 300px;
  height: 300px;
  position: absolute;
  left: 32%;
  bottom: 30%;
  z-index: -2;
  transition: all 2s;
}
.aniCircles div {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  box-shadow: 0px 0px 15px#f15153 inset;
  border: 1px solid #f15153;
}
.aniCircle .aniCircleOne {
  animation: circleOne 4.5s ease-out forwards infinite;
}
.aniCircle .aniCircleTwo {
  animation: circleOne 4.5s ease-out 1.5s forwards infinite;
}
.aniCircle .aniCircleThree {
  animation: circleOne 4.5s ease-out 3s forwards infinite;
}
</style>


